<template>
  <div class="keyboard-number-guide">
    <div class="guide-wrap">
      <div class="guide-inside">
        <div class="row-way-area row-area-1">
          <div class="way-item way-item-1">
            <div class="sign">报到方式1</div>
            <div class="content">
              <div class="first">身份证报到</div>
              <div class="last way-item-1-last"/>
            </div>
          </div>
          <div class="way-item way-item-2">
            <div class="sign">报到方式2</div>
            <div class="content">
              <div class="first">挂号单条码报到</div>
              <div class="last way-item-2-last"/>
            </div>
          </div>
        </div>
        <div class="row-way-area row-area-2">
          <div class="way-item">
            <div class="sign">报到方式3</div>
            <div class="content">
              <ul class="content-inside">
                <li class="first">医保电子凭证 扫码报到</li>
                <li class="second item">第一步：点击【医保凭证】</li>
                <li class="last item">第二步：扫描医保凭证二维码</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="row-way-area row-area-3">
          <div class="way-item">
            <div class="sign">报到方式4</div>
            <div class="content flex-box">
              <div class="flex-box-left">
                <div class="first">门诊号报到</div>
                <div class="second">
                  <el-input v-model="value" :placeholder="optionsInfo.placeholder"/>
                </div>
                <div class="last">
                  <el-button class="reset btn" @click="handleInput('reset')" :disabled="!value">重置</el-button>
                  <el-button type="primary" class="sure btn" @click="handleInput('enter')" :disabled="!value">确认
                  </el-button>
                </div>
              </div>
              <div class="flex-box-right">
                <div class="keyboard-body" v-if="true">
                  <div v-for="(item) in keyboardOptions" :key="item.key">
                    <template v-if="(item.key) ==='enter'">
                      <el-button
                          class="van-keys"
                          :class="{'disable-button': !value}"
                          :disabled="!value"
                          @click="handleInput(item.key)"
                      >
                        {{ item.title }}
                      </el-button>
                    </template>
                    <template v-else>
                      <!--判断是否是触控-->
                      <template v-if="isTouchDevice">
                        <div class="van-keys" :class="[item.className]" @touchstart="handleInput(item.key)">
                          {{ item.title }}
                        </div>
                      </template>
                      <template v-else>
                        <div class="van-keys" :class="[item.className]" @click="handleInput(item.key)">
                          {{ item.title }}
                        </div>
                      </template>
                    </template>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="tips">
        <div class="left">
          <Icon name="volume" :style="getStyle('tips')"/>
        </div>
        <div class="right">
          <ScrollX>
            {{ optionsInfo.tipContent }}
          </ScrollX>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {Icon} from 'vant';
import {pxToVw} from "@/utils/common";
import ScrollX from "@c/public/seamlessScroll/ScrollX.vue";
import ScrollEditY from "@c/public/seamlessScroll/ScrollEditY.vue";
import SimpleNumberKeyboard from "@c/public/layer/scenes/simpleNumberKeyboard/index.vue";
import {v4 as uuid} from "uuid";

export default {
  name: 'ReportKeyboard',

  components: {
    Icon,
    ScrollX,
    ScrollEditY,
    SimpleNumberKeyboard
  },

  props: {
    options: {
      type: Array
    },
    field: {
      type: Object
    },
  },

  data() {
    return {
      timeout: null,
      // 自动清空的等待时间
      timeoutDuration: 15 * 1000,  //10min
      // 输入的参数
      value: '',
      //键盘的参数
      keyboardOptions: [
        {key: '1', title: '1'},
        {key: '2', title: '2'},
        {key: '3', title: '3'},
        {key: '4', title: '4'},
        {key: '5', title: '5'},
        {key: '6', title: '6'},
        {key: '7', title: '7'},
        {key: '8', title: '8'},
        {key: '9', title: '9'},
        {key: 'X', title: 'X'},
        {key: '0', title: '0'},
        {key: 'del', title: '删除', className: 'van-keys-del'},
      ],
      number: 0,
      widgetKey: uuid(),
      optionsInfo: Object(),
    }
  },

  computed: {
    // 模板的行内样式
    getStyle() {
      return function (val) {
        const self = this;
        let info = (self.field?.options?.reportInfoConfig) || Array();
        let Obj = Object();
        switch (val) {
          case "head":
            Reflect.set(Obj, "color", (info.headerFontColor));
            Reflect.set(Obj, "height", pxToVw(info.headHeight));
            Reflect.set(Obj, "lineHeight", pxToVw(info.headHeight));
            Reflect.set(Obj, "backgroundColor", (info.headerBackgroundColor));
            return Obj;
          case "list":
            Reflect.set(Obj, "height", pxToVw(info.contentHeight));
            return Obj;
          case "listItem":
            Reflect.set(Obj, "lineHeight", pxToVw(info.lineHeight));
            Reflect.set(Obj, "height", pxToVw(info.lineHeight));
            return Obj;
          case "tips":
            Reflect.set(Obj, "color", (info.tipsFontColor));
            Reflect.set(Obj, "fontSize", pxToVw(info.tipsFontSize));
            return Obj;
        }
      };
    },

    // 判断设备是否是触控
    isTouchDevice() {
      return 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
    }
  },

  mounted() {
    //step5 监听页面操作，触发重置超时函数
    window.addEventListener("mousemove", this.resetTimeout);
    window.addEventListener("keydown", this.resetTimeout);
    window.addEventListener("click", this.resetTimeout);
    this.resetTimeout();
  },

  methods: {


    onChange() {
    },

    // 输入新的数组
    onKeyPress() {
      this.number = ++(this.number)
    },

    handleInput(key) {
      const self = this;
      switch (key) {
        case 'del':
          this.value = this.value.slice(0, -1);
          break;
        case 'reset':
          this.value = '';
          break;
          // 提交按钮
        case 'enter':
          if (this.value.trim().length > 0) {
            let params = Object();
            Reflect.set(params, 'number', (self.value));
            self.$emit('handleSubmit', params);
            self.value = '';
          }
          break;
        default:
          if (this.value.trim().length < 18) {
            this.value += key
          }
      }
    },

    // 重置定时器时间
    resetTimeout() {
      console.log('wrap-执行-重置定时器时间')
      if (!!(this.timeout)) {
        clearTimeout(this.timeout);
      }
      // 特定时间不做操作关闭抽屉-清空数据
      this.timeout = setTimeout(() => {
        console.log('执行-重置定时器时间')
        this.value = '';
      }, this.timeoutDuration);
    },
  },

  watch: {
    // 获取配置项
    field: {
      handler: function (val) {
        let key = (val.options.config)
        this.widgetKey = uuid()
        this.optionsInfo = val.options[key];
      },
      deep: true,
      immediate: true
    },
  },

  destroyed() {
    window.removeEventListener("mousemove", this.resetTimeout);
    window.removeEventListener("keydown", this.resetTimeout);
    window.removeEventListener("click", this.resetTimeout);
  }

};
</script>

<style lang="scss" scoped>
.keyboard-number-guide {
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;

  .keyboard-header {
    padding: 10px 0 12px 0;

    .item {
      text-align: center;
      line-height: 160px;
      height: 160px;
      font-size: 65px;
      outline: none;
      border-radius: 26px;
      background: #fff;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .patient-number,
    .patient-number-desc {
      font-family: PingFangSC, PingFang SC, serif;
      font-weight: 500;
      font-size: 72px;
    }
  }

  //键盘
  .keyboard-body {
    display: flex;
    justify-content: space-between;
    flex: 3;
    padding: 10px 0;
    flex-wrap: wrap;

    > div {
      flex: 1;
      text-align: center;
      padding: 8px 6px;
      cursor: pointer;
      flex-basis: calc(100% / 3);
      font-size: 54px;
      display: flex;
      box-sizing: border-box;

      .van-keys {
        flex-shrink: 0;
        background-color: rgba(232, 234, 236, 0.5);
        cursor: pointer;
        height: 74px;
        flex-grow: 1;
        line-height: 74px;
        width: 100%;
        border-radius: 12px;
        font-weight: 400;
        color: #232324;
        text-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
        box-shadow: rgba(14, 30, 37, 0.2) 0 2px 4px 0, rgba(14, 30, 37, 0.4) 0 2px 8px 0;

        &.van-keys-del {
          font-size: 0;
          @include background('design/key-del', center, center);
          background-size: 96px 66px;
        }

        &.disable-button {
          color: #c0c4cc;
          cursor: not-allowed;
          background-image: none;
          background-color: #fff;
          border-color: #ebeef5;

          &:active {
            background-color: #fff;
          }
        }

        &:active {
          background-color: #ebedf0;
        }
      }

      .el-button {
        font-size: 52px;
      }
    }
  }

  .guide-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;

    .guide-inside {
      height: calc(100% - 134px);
      padding: 0 30px 30px 30px;
      width: 100%;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      overflow: hidden;

      .row-way-area {
        width: calc(100%);
        height: calc(calc(100% - 84px - 84px - 46px) / 3);
        flex-grow: 1;
        background: #FFFFFF;
        border-radius: 30px;
        margin-top: 14px;
        margin-bottom: 14px;
        padding: 24px;
        flex-shrink: 0;
        box-sizing: border-box;

        &:last-child {
          margin-bottom: 0;
        }

        .way-item {
          flex-grow: 1;
          display: flex;
          flex-shrink: 0;
          width: calc(100% / 2);

          .sign {
            height: 100%;
            width: 120px;
            color: white;
            display: flex;
            text-align: center;
            align-items: center;
            align-self: center;
            align-content: center;
            background: #0059B3;
            flex-shrink: 0;
            font-size: 50px;
            margin-right: 10px;
            line-height: 1.16;
            border-radius: 12px;
            padding: 30px 28px;
            box-sizing: border-box;
          }

          .content {
            flex-shrink: 0;
            font-size: 48px;
            width: calc(100% - 120px - 10px);
          }
        }
      }

      .row-area-1 {
        display: flex;
        flex-direction: row;

        .way-item {
          display: flex;
          flex-direction: row;

          .content {
            height: auto;
            display: flex;
            flex-direction: column;
            align-self: center;
            align-items: center;
            align-content: center;

            .first {
              padding: 20px 0;
            }

            .last {
              height: 260px;
              width: 260px;
              align-items: center;
              align-self: center;
              align-content: center;
              border: 1px #E8E8E8 dashed;
              border-radius: 8px;
              overflow: hidden;

            }

            .way-item-1-last {
              @include background('design/1-17×2')
            }

            .way-item-2-last {
              @include background('design/1-18×2')
            }

          }
        }

      }

      //区域二
      .row-area-2 {
        display: flex;
        flex-direction: row;

        .way-item {
          width: calc(100% / 1);

          .content {
            width: calc(100% - 120px - 10px);
            @include background('design/1-19×2', right, center, 320px, 320px);

            .content-inside {
              align-self: center;
              align-content: center;
              height: 100%;
              padding-left: 32px;

              .first {
                width: 60%;
                font-size: 60px;
                color: #333333;
                line-height: 1.36;
                padding-bottom: 22px;
              }

              .item {
                width: 100%;
                line-height: 1.6;
                font-size: 38px;
                border: none;
                color: #99A1B3;
              }
            }
          }
        }
      }

      //区域三
      .row-area-3 {
        display: flex;
        flex-direction: row;

        .way-item {
          width: calc(100% / 1);

          .content {
            width: calc(100% - 120px - 10px);
            min-width: auto;
            box-sizing: border-box;
            flex-shrink: 0;

            .flex-box-left {
              width: 420px;
              border: none;
              flex-shrink: 0;
              padding-left: 32px;
              padding-right: 32px;
              display: flex;
              box-sizing: border-box;
              background: transparent;
              flex-direction: column;

              .first {
                width: 100%;
                font-weight: 500;
                font-size: 60px;
                color: #333333;
                margin-top: 48px;
                padding-bottom: 40px;
                box-sizing: border-box;
              }

              .second {
                height: 94px;
                margin-bottom: 34px;

                .el-input {
                  height: 100%;
                }

                :deep(.el-input__inner) {
                  height: 100%;
                  font-weight: 500;
                  font-size: 40px;
                  color: #333333;
                  overflow: hidden;
                  border-radius: 12px;
                  border: 4px solid #CDD2DC;
                }
              }

              .last {
                width: 100%;
                display: flex;
                flex-grow: 1;
                justify-content: space-between;

                .btn {
                  font-size: 40px;
                  flex-shrink: 0;
                  background-color: rgba(232, 234, 236, 0.5);
                  height: 84px;
                  box-sizing: border-box;
                  border-radius: 12px;
                  font-weight: 400;
                  color: #232324;
                  text-align: center;
                  text-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
                  box-shadow: rgba(14, 30, 37, 0.2) 0 2px 4px 0, rgba(14, 30, 37, 0.4) 0 2px 8px 0;
                }

                .reset {
                  width: 140px;
                }

                .sure {
                  width: calc(100% - 140px - 28px);
                  color: #E8E8E8;
                  background: #0059B3;
                }
              }
            }

            .flex-box-right {
              border: none;
              flex-shrink: 0;
              background: transparent;
              width: calc(100% - 420px);
            }
          }
        }
      }
    }

    .tips {
      height: 134px;
      width: 100%;
      display: flex;
      margin: 0 auto;
      justify-content: center;
      align-items: center;
      align-self: center;
      align-content: center;
      color: white;
      padding: 0 30px;
      box-sizing: border-box;
      background: #0059B3;

      .left {
        width: 90px;
        flex-shrink: 0;
        box-sizing: border-box;
        margin-right: 20px;
      }

      .right {
        box-sizing: border-box;
        font-size: 68px;
        flex-shrink: 0;
        max-width: calc(100% - 90px - 30px);
      }
    ;

    }
  }
}
</style>
